<template>
  <el-container class="cc-container">
    <el-aside class="cc-container-aside">
      <div class="menu-header-left">
        <img src="@/assets/images/logo-img.png" alt="" class="logo" />
        <!-- <span>监控系统</span> -->
      </div>
      <el-aside style="background-color: #ffffff" class="cc-container-aside-ul">
        <el-menu :default-active="defaultActive">
          <div v-for="item in asideList" :key="item.id">
            <!-- 一级菜单无子节点 -->
            <template v-if="item.children && item.children.length == 0">
              <el-menu-item :index="item.path" @click="handleSelect(item)">
                <i :class="item.icon" v-if="item.icon" class="f20"></i>
                {{ item.name }}
              </el-menu-item>
            </template>
            <!-- 一级菜有子节点 -->
            <template v-else>
              <el-submenu :index="item.id">
                <template slot="title">
                  <i :class="item.icon" v-if="item.icon" class="f20"></i>
                  {{ item.name }}
                </template>

                <div v-for="item_ in item.children" :key="item_.id">
                  <!-- 二级菜单无节点 -->
                  <template v-if="item_.children && item_.children.length == 0">
                    <el-menu-item :index="item_.path" @click="handleSelect(item_)">
                      <i :class="item.icon" v-if="item_.icon" class="f20"></i>
                      {{ item_.name }}
                    </el-menu-item>
                  </template>

                  <!-- 二级菜单有子节点 -->
                  <template v-else>
                    <el-submenu :index="item_.id">
                      <template slot="title">
                        <i :class="item.icon" v-if="item_.icon" class="f20"></i>
                        {{ item_.name }}
                      </template>

                      <div v-for="item__ in item_.children" :key="item__.id">
                        <!-- 三级菜单无子节点 -->
                        <template v-if="item__.children && item__.children.length == 0">
                          <el-menu-item :index="item__.path" @click="handleSelect(item__)">
                            <i :class="item.icon" v-if="item__.icon" class="f20"></i>
                            {{ item__.name }}
                          </el-menu-item>
                        </template>

                        <!-- 三级菜单有子节点 -->
                        <template v-else>
                          <el-submenu :index="item__.path">
                            <template slot="title">
                              <i :class="item.icon" v-if="item_.icon" class="f20"></i>
                              {{ item_.name }}
                            </template>

                            <div v-for="item___ in item_.children" :key="item___.id">
                              <!-- 四级菜单 -->
                            </div>
                          </el-submenu>
                        </template>
                      </div>
                    </el-submenu>
                  </template>
                </div>
              </el-submenu>
            </template>
          </div>
        </el-menu>
      </el-aside>
    </el-aside>

    <div class="cc-container-main">
      <elsHeader></elsHeader>
      <el-main>
        <router-view></router-view>
      </el-main>
    </div>
  </el-container>
</template>

<script>
import elsHeader from "@/components/Header/elHeader.vue";
export default {
  data() {
    return {
      defaultActive: "",
      asideList: [
        {
          id: "index",
          fatherID: "VMenu00006",
          type: 3,
          name: "首页",
          icon: "iconfont icon-shouye",
          path: "/home/index",
          component: null,
          orderIndex: 1,
          children: [],
          hidden: false,
          summary: null,
          systemID: null,
          approveCountApi: null,
        },
        {
          id: "systemMonitor",
          fatherID: "VMenu00006",
          type: 3,
          name: "系统监控",
          icon: "iconfont icon-xitongjiankong",
          path: "",
          component: null,
          orderIndex: 2,
          children: [
            {
              id: "systemAvailable",
              fatherID: "systemMonitor",
              type: 5,
              name: "服务存活",
              icon: "",
              path: "",
              component: null,
              orderIndex: 12,
              children: [
                {
                  id: "systemAvailable_task",
                  fatherID: "systemAvailable",
                  type: 5,
                  name: "任务",
                  icon: "",
                  path: "/home/serviceSurviveTask",
                  component: null,
                  orderIndex: 11,
                  children: [],
                  hidden: false,
                  summary: null,
                  systemID: null,
                  approveCountApi: null,
                },
                {
                  id: "systemAvailable_log",
                  fatherID: "systemAvailable",
                  type: 5,
                  name: "日志",
                  icon: "",
                  path: "/home/serviceSurviveLog",
                  component: null,
                  orderIndex: 11,
                  children: [],
                  hidden: false,
                  summary: null,
                  systemID: null,
                  approveCountApi: null,
                },
              ],
              hidden: false,
              summary: null,
              systemID: null,
              approveCountApi: null,
            },
            {
              id: "interfaceAvailable",
              fatherID: "systemMonitor",
              type: 5,
              name: "接口可用",
              icon: "",
              path: "",
              component: null,
              orderIndex: 13,
              children: [
                {
                  id: "interfaceAvailable_task",
                  fatherID: "interfaceAvailable",
                  type: 5,
                  name: "任务",
                  icon: "",
                  path: "/home/interfaceAvailableTask",
                  component: null,
                  orderIndex: 11,
                  children: [],
                  hidden: false,
                  summary: null,
                  systemID: null,
                  approveCountApi: null,
                },
                {
                  id: "interfaceAvailable_log",
                  fatherID: "interfaceAvailable",
                  type: 5,
                  name: "日志",
                  icon: "",
                  path: "/home/interfaceAvailableLog",
                  component: null,
                  orderIndex: 11,
                  children: [],
                  hidden: false,
                  summary: null,
                  systemID: null,
                  approveCountApi: null,
                },
              ],
              hidden: false,
              summary: null,
              systemID: null,
              approveCountApi: null,
            },
          ],
          hidden: false,
          summary: null,
          systemID: null,
          approveCountApi: null,
        },
        {
          id: "serverMonitor",
          fatherID: "VMenu00006",
          type: 3,
          name: "服务器监控",
          icon: "iconfont icon-PCfuwuqi",
          path: "/home/serverMonitor",
          component: null,
          children: [
            {
              id: "serverMonitor_task",
              fatherID: "serverMonitor",
              type: 5,
              name: "任务",
              icon: "",
              path: "/home/serverTask",
              component: null,
              orderIndex: 11,
              children: [],
              hidden: false,
              summary: null,
              systemID: null,
              approveCountApi: null,
            },
            {
              id: "serverMonitor_log",
              fatherID: "serverMonitor",
              type: 5,
              name: "日志",
              icon: "",
              path: "/home/serverRecord",
              component: null,
              orderIndex: 11,
              children: [],
              hidden: false,
              summary: null,
              systemID: null,
              approveCountApi: null,
            },
          ],
          orderIndex: 3,
          hidden: false,
          summary: null,
          systemID: null,
          approveCountApi: null,
        },
        {
          id: "middlewareMonitor",
          fatherID: "VMenu00006",
          type: 3,
          name: "中间件监控",
          icon: "iconfont icon-zhongjianjianjiqun",
          path: "/home/middleware",
          component: null,
          orderIndex: 4,
          children: [
            {
              id: "middlewareMonitor_sqlServer",
              fatherID: "middlewareMonitor",
              type: 3,
              name: "sql server",
              icon: "",
              path: "",
              component: null,
              orderIndex: 14,
              children: [
                {
                  id: "middlewareMonitor_sqlServer_task",
                  fatherID: "middlewareMonitor_sqlServer",
                  type: 5,
                  name: "任务",
                  icon: "",
                  path: "/home/sqlserverTask",
                  component: null,
                  orderIndex: 11,
                  children: [],
                  hidden: false,
                  summary: null,
                  systemID: null,
                  approveCountApi: null,
                },
                {
                  id: "middlewareMonitor_sqlServer_log",
                  fatherID: "middlewareMonitor_sqlServer",
                  type: 5,
                  name: "日志",
                  icon: "",
                  path: "/home/sqlserverRecord",
                  component: null,
                  orderIndex: 11,
                  children: [],
                  hidden: false,
                  summary: null,
                  systemID: null,
                  approveCountApi: null,
                },
              ],
              hidden: false,
              summary: null,
              systemID: null,
              approveCountApi: null,
            },
            {
              id: "middlewareMonitor_mysql",
              fatherID: "middlewareMonitor",
              type: 3,
              name: "mysql",
              icon: "",
              path: "",
              component: null,
              orderIndex: 15,
              children: [
                {
                  id: "middlewareMonitor_mysql_task",
                  fatherID: "middlewareMonitor_mysql",
                  type: 5,
                  name: "任务",
                  icon: "",
                  path: "/home/mysqlTask",
                  component: null,
                  orderIndex: 11,
                  children: [],
                  hidden: false,
                  summary: null,
                  systemID: null,
                  approveCountApi: null,
                },
                {
                  id: "middlewareMonitor_mysql_log",
                  fatherID: "middlewareMonitor_mysql",
                  type: 5,
                  name: "日志",
                  icon: "",
                  path: "/home/mysqlRecord",
                  component: null,
                  orderIndex: 11,
                  children: [],
                  hidden: false,
                  summary: null,
                  systemID: null,
                  approveCountApi: null,
                },
              ],
              hidden: false,
              summary: null,
              systemID: null,
              approveCountApi: null,
            },
            {
              id: "middlewareMonitor_elasticsearch",
              fatherID: "middlewareMonitor",
              type: 3,
              name: "elasticsearch",
              icon: "",
              path: "",
              component: null,
              orderIndex: 15,
              children: [
                {
                  id: "middlewareMonitor_elasticsearch_task",
                  fatherID: "middlewareMonitor_elasticsearch",
                  type: 5,
                  name: "任务",
                  icon: "",
                  path: "/home/elasticsearchTask",
                  component: null,
                  orderIndex: 11,
                  children: [],
                  hidden: false,
                  summary: null,
                  systemID: null,
                  approveCountApi: null,
                },
                {
                  id: "middlewareMonitor_elasticsearch_log",
                  fatherID: "middlewareMonitor_elasticsearch",
                  type: 5,
                  name: "日志",
                  icon: "",
                  path: "/home/elasticsearchRecord",
                  component: null,
                  orderIndex: 11,
                  children: [],
                  hidden: false,
                  summary: null,
                  systemID: null,
                  approveCountApi: null,
                },
              ],
              hidden: false,
              summary: null,
              systemID: null,
              approveCountApi: null,
            },
            {
              id: "middlewareMonitor_mongodb",
              fatherID: "middlewareMonitor",
              type: 3,
              name: "mongodb",
              icon: "",
              path: "",
              component: null,
              orderIndex: 15,
              children: [
                {
                  id: "middlewareMonitor_mongodb_task",
                  fatherID: "middlewareMonitor_mongodb",
                  type: 5,
                  name: "任务",
                  icon: "",
                  path: "/home/mongodbTask",
                  component: null,
                  orderIndex: 11,
                  children: [],
                  hidden: false,
                  summary: null,
                  systemID: null,
                  approveCountApi: null,
                },
                {
                  id: "middlewareMonitor_mongodb_log",
                  fatherID: "middlewareMonitor_mongodb",
                  type: 5,
                  name: "日志",
                  icon: "",
                  path: "/home/mongodbRecord",
                  component: null,
                  orderIndex: 11,
                  children: [],
                  hidden: false,
                  summary: null,
                  systemID: null,
                  approveCountApi: null,
                },
              ],
              hidden: false,
              summary: null,
              systemID: null,
              approveCountApi: null,
            },
            {
              id: "middlewareMonitor_rabbitmq",
              fatherID: "middlewareMonitor",
              type: 3,
              name: "rabbitmq",
              icon: "",
              path: "",
              component: null,
              orderIndex: 15,
              children: [
                {
                  id: "middlewareMonitor_rabbitmq_task",
                  fatherID: "middlewareMonitor_rabbitmq",
                  type: 5,
                  name: "任务",
                  icon: "",
                  path: "/home/rabbitmqTask",
                  component: null,
                  orderIndex: 11,
                  children: [],
                  hidden: false,
                  summary: null,
                  systemID: null,
                  approveCountApi: null,
                },
                {
                  id: "middlewareMonitor_rabbitmq_log",
                  fatherID: "middlewareMonitor_rabbitmq",
                  type: 5,
                  name: "日志",
                  icon: "",
                  path: "/home/rabbitmqRecord",
                  component: null,
                  orderIndex: 11,
                  children: [],
                  hidden: false,
                  summary: null,
                  systemID: null,
                  approveCountApi: null,
                },
              ],
              hidden: false,
              summary: null,
              systemID: null,
              approveCountApi: null,
            },
            {
              id: "middlewareMonitor_redis",
              fatherID: "middlewareMonitor",
              type: 3,
              name: "redis",
              icon: "",
              path: "",
              component: null,
              orderIndex: 15,
              children: [
                {
                  id: "middlewareMonitor_redis_task",
                  fatherID: "middlewareMonitor_redis",
                  type: 5,
                  name: "任务",
                  icon: "",
                  path: "/home/redisTask",
                  component: null,
                  orderIndex: 11,
                  children: [],
                  hidden: false,
                  summary: null,
                  systemID: null,
                  approveCountApi: null,
                },
                {
                  id: "middlewareMonitor_redis_log",
                  fatherID: "middlewareMonitor_redis",
                  type: 5,
                  name: "日志",
                  icon: "",
                  path: "/home/redisRecord",
                  component: null,
                  orderIndex: 11,
                  children: [],
                  hidden: false,
                  summary: null,
                  systemID: null,
                  approveCountApi: null,
                },
              ],
              hidden: false,
              summary: null,
              systemID: null,
              approveCountApi: null,
            },
          ],
          hidden: false,
          summary: null,
          systemID: null,
          approveCountApi: null,
        },
        {
          id: "logMonitor",
          fatherID: "VMenu00006",
          type: 3,
          name: "日志监控",
          icon: "iconfont icon-menu_dlrz",
          path: "/home/logMonitor",
          component: null,
          orderIndex: 6,
          children: [
            {
              id: "logMonitor_task",
              fatherID: "logMonitor",
              type: 5,
              name: "任务",
              icon: "",
              path: "/home/logMonitorTask",
              component: null,
              orderIndex: 11,
              children: [],
              hidden: false,
              summary: null,
              systemID: null,
              approveCountApi: null,
            },
            {
              id: "logMonitor_log",
              fatherID: "logMonitor",
              type: 5,
              name: "日志",
              icon: "",
              path: "/home/logMonitorLog",
              component: null,
              orderIndex: 11,
              children: [],
              hidden: false,
              summary: null,
              systemID: null,
              approveCountApi: null,
            },
          ],
          hidden: false,
          summary: null,
          systemID: null,
          approveCountApi: null,
        },
        {
          id: "logAnalysis",
          fatherID: "VMenu00006",
          type: 3,
          name: "日志分析",
          icon: "iconfont icon-menu_dlrz",
          path: "/home/logAnalysis",
          component: null,
          orderIndex: 6,
          children: [
            {
              id: "logAnalysis_pageVisitLog",
              fatherID: "logAnalysis",
              type: 5,
              name: "页面访问日志",
              icon: "",
              path: "/home/pageLog",
              component: null,
              orderIndex: 11,
              children: [],
              hidden: false,
              summary: null,
              systemID: null,
              approveCountApi: null,
            },
            {
              id: "logAnalysis_userLoginLog",
              fatherID: "logAnalysis",
              type: 5,
              name: "用户登录日志",
              icon: "",
              path: "/home/userLog",
              component: null,
              orderIndex: 11,
              children: [],
              hidden: false,
              summary: null,
              systemID: null,
              approveCountApi: null,
            },
            {
              id: "logAnalysis_interfaceCallLog",
              fatherID: "logAnalysis",
              type: 5,
              name: "接口调用日志",
              icon: "",
              path: "/home/joggleLog",
              component: null,
              orderIndex: 11,
              children: [],
              hidden: false,
              summary: null,
              systemID: null,
              approveCountApi: null,
            },
          ],
          hidden: false,
          summary: null,
          systemID: null,
          approveCountApi: null,
        },
        {
          id: "configuration",
          fatherID: "VMenu00006",
          type: 3,
          name: "配置管理",
          icon: "iconfont icon-peizhiguanli",
          path: "",
          component: null,
          orderIndex: 66,
          children: [
            {
              id: "configuration_system",
              fatherID: "configuration",
              type: 4,
              name: "系统",
              icon: "",
              path: "/home/confSystem",
              component: null,
              orderIndex: 67,
              children: [],
              hidden: false,
              summary: null,
              systemID: null,
              approveCountApi: null,
            },
            {
              id: "configuration_environment",
              fatherID: "configuration",
              type: 3,
              name: "环境",
              icon: "",
              path: "/home/confEnvironment",
              component: null,
              orderIndex: 68,
              children: [],
              hidden: false,
              summary: null,
              systemID: null,
              approveCountApi: null,
            },
            {
              id: "configuration_service",
              fatherID: "configuration",
              type: 3,
              name: "服务",
              icon: "",
              path: "/home/confService",
              component: null,
              orderIndex: 69,
              children: [],
              hidden: false,
              summary: null,
              systemID: null,
              approveCountApi: null,
            },
            {
              id: "configuration_model",
              fatherID: "configuration",
              type: 3,
              name: "模块",
              icon: "",
              path: "/home/confModel",
              component: null,
              orderIndex: 61,
              children: [],
              hidden: false,
              summary: null,
              systemID: null,
              approveCountApi: null,
            },
            {
              id: "configuration_api",
              fatherID: "configuration",
              type: 3,
              name: "接口",
              icon: "",
              path: "/home/confInterface",
              component: null,
              orderIndex: 70,
              children: [],
              hidden: false,
              summary: null,
              systemID: null,
              approveCountApi: null,
            },
            {
              id: "configuration_server",
              fatherID: "configuration",
              type: 3,
              name: "服务器",
              icon: "",
              path: "/home/confServer",
              component: null,
              orderIndex: 71,
              children: [],
              hidden: false,
              summary: null,
              systemID: null,
              approveCountApi: null,
            },
            {
              id: "configuration_log",
              fatherID: "configuration",
              type: 3,
              name: "日志",
              icon: "",
              path: "/home/confLog",
              component: null,
              orderIndex: 70,
              children: [],
              hidden: false,
              summary: null,
              systemID: null,
              approveCountApi: null,
            },
            {
              id: "configuration_email",
              fatherID: "configuration",
              type: 3,
              name: "邮箱",
              icon: "",
              path: "/home/confEmail",
              component: null,
              orderIndex: 72,
              children: [],
              hidden: false,
              summary: null,
              systemID: null,
              approveCountApi: null,
            },
            {
              id: "configuration_cellPhone",
              fatherID: "configuration",
              type: 3,
              name: "短信",
              icon: "",
              path: "/home/confShortMessage",
              component: null,
              orderIndex: 73,
              children: [],
              hidden: false,
              summary: null,
              systemID: null,
              approveCountApi: null,
            },
            {
              id: "configuration_sqlServer",
              fatherID: "configuration",
              type: 3,
              name: "sql server",
              icon: "",
              path: "/home/confMysql/2",
              component: null,
              orderIndex: 74,
              children: [],
              hidden: false,
              summary: null,
              systemID: null,
              approveCountApi: null,
            },
            {
              id: "configuration_mysql",
              fatherID: "configuration",
              type: 3,
              name: "mysql",
              icon: "",
              path: "/home/confMysql/1",
              component: null,
              orderIndex: 75,
              children: [],
              hidden: false,
              summary: null,
              systemID: null,
              approveCountApi: null,
            },

            {
              id: "configuration_elasticsearch",
              fatherID: "configuration",
              type: 3,
              name: "elasticsearch",
              icon: "",
              path: "/home/elasticsearch",
              component: null,
              orderIndex: 75,
              children: [],
              hidden: false,
              summary: null,
              systemID: null,
              approveCountApi: null,
            },
            {
              id: "configuration_mongodb",
              fatherID: "configuration",
              type: 3,
              name: "mongodb",
              icon: "",
              path: "/home/mongodb",
              component: null,
              orderIndex: 75,
              children: [],
              hidden: false,
              summary: null,
              systemID: null,
              approveCountApi: null,
            },
            {
              id: "configuration_rabbitmq",
              fatherID: "configuration",
              type: 3,
              name: "rabbitmq",
              icon: "",
              path: "/home/rabbitmq",
              component: null,
              orderIndex: 75,
              children: [],
              hidden: false,
              summary: null,
              systemID: null,
              approveCountApi: null,
            },
            {
              id: "configuration_redis",
              fatherID: "configuration",
              type: 3,
              name: "redis",
              icon: "",
              path: "/home/redis",
              component: null,
              orderIndex: 75,
              children: [],
              hidden: false,
              summary: null,
              systemID: null,
              approveCountApi: null,
            },
            {
              id: "configuration_kafka",
              fatherID: "configuration",
              type: 3,
              name: "kafka",
              icon: "",
              path: "/home/kafka",
              component: null,
              orderIndex: 76,
              children: [],
              hidden: false,
              summary: null,
              systemID: null,
              approveCountApi: null,
            },
            {
              id: "configuration_zookeeper",
              fatherID: "configuration",
              type: 3,
              name: "zookeeper",
              icon: "",
              path: "/home/zookeeper",
              component: null,
              orderIndex: 77,
              children: [],
              hidden: false,
              summary: null,
              systemID: null,
              approveCountApi: null,
            },
            {
              id: "configuration_cancal",
              fatherID: "configuration",
              type: 3,
              name: "cancal",
              icon: "",
              path: "/home/kcancal",
              component: null,
              orderIndex: 78,
              children: [],
              hidden: false,
              summary: null,
              systemID: null,
              approveCountApi: null,
            },
          ],
          hidden: false,
          summary: null,
          systemID: null,
          approveCountApi: null,
        },
      ],
    };
  },
  components: {
    elsHeader,
  },
  watch: {
    $route(to, from) {
      this.defaultActive = to.path;
    },
  },
  methods: {
    handleSelect(item) {
      console.log("tag", item);
      if (item.path) {
        this.defaultActive = item.path;
        sessionStorage.setItem("defaultActive", item.path);
        this.$router.push(item.path).catch(() => { });
      }
    },
  },
  created() {
    if (sessionStorage.getItem("defaultActive")) {
      this.defaultActive = sessionStorage.getItem("defaultActive");
    }
  },
};
</script>

<style lang="scss">
html {
  height: 100%;
}

body {
  height: 100%;
}

.cc-container {
  .el-menu {
    padding: 0 24px;
    border-right: none;
  }

  .el-menu-item.is-active {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    background: #004fee;
    border-radius: 4px;
  }

  .el-submenu__title {
    padding-left: 13px !important;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #222222;

    // i {
    //   margin-right: 10px;
    //   font-size: 20px;
    // }
  }

  .el-submenu__title {
    i {
      color: #a0a2b5;
    }
  }

  .el-menu-item {
    padding-left: 13px !important;
  }
}
</style>
<style scoped lang="scss">
.f20 {
  font-size: 20px;
  margin-right: 10px;
  color: #a0a2b5;
}

.cc-container {
  width: 100%;
  height: 100% !important;
  overflow: hidden;

  &-aside {
    width: 200px;
    overflow: hidden;

    &-ul {
      // padding-top: 20px;
      border-right: solid 1px #e6e6e6;
      width: 100%;
      height: calc(100% - 53px);
      overflow-x: hidden;
      /*x轴禁止滚动*/
      overflow-y: scroll;
      /*y轴滚动*/
    }
  }

  &-main {
    width: calc(100% - 300px);
    display: flex;
    flex-direction: column;
  }
}

.cc-container-aside-ul::-webkit-scrollbar {
  display: none;
  /*隐藏滚动条*/
}

::deep .el-main {
  padding: 0 !important;
}

.menu-header-left {
  height: 53px;
  background: #ffffff;
  border-bottom: 1px solid #eeeeee;
  display: flex;
  align-items: center;

  //   img {
  //     width: 132px;
  //     height: 29px;
  //     margin-left: 24px;
  //   }
  span {
    margin-left: 24px;
    font-size: 16px;
    font-weight: 700;
    color: #000000;
  }

  // border: 1px solid #eeeeee;
}

.logo {
  margin-left: 34px;
  width: 118px;
  height: 28px;
}
</style>